<template>
    <div class="search-mv">
        <!-- 返回首页/上一级 -->
        <div class="search-mv-header">
            <div @click="gobackPage()">
                <i class="bi bi-chevron-left"></i>返回
            </div>
            <router-link to='/'>
                <i class="bi bi-house-door"></i> 首页
            </router-link>
        </div>
        <!-- 输入框 -->
        <div class="input-container">
            <i class="bi bi-search search-icon"></i>
            <!-- 清除输入框里的文字 -->
            <i 
                class="bi bi-x-circle search-clear"
                v-show="inputTxt != undefined && inputTxt.length > 0"
                @click="inputTxt = ''"
            ></i>
            <input 
                type="text" 
                v-model="inputTxt" 
                placeholder="搜电影"
            >
            <div 
                class="btn"
                @click="getResult">
                搜索
            </div>
        </div>
        <!-- 显示搜索结果 -->
        <search-result
            :keyword ='keyword'
            :hasKeyWord='hasKeyWord'
        ></search-result>
        <!-- 显示搜索历史 -->
        <search-history
            v-show='!hasKeyWord'
            :keyword = 'keyword'
            @changeKeyword = 'pushKeyword'
        ></search-history>
    </div>
</template>

<script>
//输入关键词，显示结果
import searchResult from '@/components/search_view/searchResult.vue'
// 显示搜索历史
import searchHistory from '@/components/search_view/searchHistory.vue'

export default {
    name: 'searchMv',
    data() {
        return {
            inputTxt: '', //输入框文字
            keyword: '', // 搜索的关键词
            inputTimer: null, //用于输入文字防抖 
            hasInputTxt: false, //判断输入框有没有文字
            hasKeyWord: false, //判断有无正在或已搜索字符
            recommendList: [], // 根据输入框推荐的电影名字
        }
    },
    components: {
        searchResult,
        searchHistory
    },
    methods: {
        getResult() {
            this.keyword = this.inputTxt;
        },
        // 返回上一级
        gobackPage() {
            this.$router.go(-1);
        },
        // 把历史记录放入搜索框里
        pushKeyword(word) {
            this.inputTxt = word;
        }
    },
    watch: {
        keyword(newv, oldv){
            if(newv != undefined && newv.length > 0){
                this.hasKeyWord = true;
            }
            else {
                this.hasKeyWord = false;
            }
        },
        inputTxt(newv, oldv){
            if(newv != undefined && newv.length > 0){
                this.hasInputTxt = true;
            }
            else {
                this.hasInputTxt = false;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common/variable.scss';
.search-mv {
    background-color: $bgColor2;
    height: 100%;
    width: 100%;
    overflow: auto;
    position: fixed;
}
.search-mv-header {
    font-size: 20px;
    padding: 0px 15px;
    height: 50px;
    line-height: 50px;
    background-color: $color2;
    display: flex;
    justify-content: space-between;
    color: white;
    a {
        color: white;
    }
}
// 输入框
.input-container {
    margin: 10px 15px;
    position: relative;
    font-size: 20px;
    line-height: 36px;
    .search-icon {
        position: absolute;
        left: 10px;
        top:50%;
        transform: translate(0,-50%);
        color: #888;
    }
    .search-clear {
        position: absolute;
        right: 72px;
        top:50%;
        transform: translate(0,-50%);
        color: #888;
    }
    input {
        width: 280px;
        line-height: 36px;
        padding-left: 40px;
        padding-right: 32px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-sizing: border-box;
    }
    .btn {
        width: 40px;
        margin-left: 20px;
        font-size: 16px;
        border: 1px solid #888;
        border-radius: 5px;
        box-sizing: border-box;
        text-align: center;
        display: inline-block;
        background: white;
        color: #888;
    }
}
// 推荐结果
.recommend-list {
    .r-l-item {
        font-size: 14px;
    }
}
</style>